analog clock - 3

            <div class="klok">
                <div class="uur"><div class="ur" id="ur"></div></div>
                <div class="minuut"><div class="mu" id="mu"></div></div>
                <div class="sekonde"><div class="sek" id="sek"></div></div>
              </div>   
              <script>
                  // for time;
                  let deg = 6; // 360 / (12 * 5);
                  const ur = document.querySelector('#ur');
                  const mu = document.querySelector('#mu');
                  const sek = document.querySelector('#sek');
          
                  setInterval(() => {
                      let day1 = new Date();
                      let hh1 = day1.getHours() * 30;
                      let mm1 = day1.getMinutes() * deg;
                      let ss1 = day1.getSeconds() * deg;
                  
                      ur.style.transform = `rotateZ(${(hh1) + (mm1 / 12)}deg)`;
                      mu.style.transform = `rotateZ(${mm1}deg)`;
                      sek.style.transform = `rotateZ(${ss1}deg)`;
                      
                      // gives the smooth transitioning effect, but there's a bug here!
                      // sc.style.transition = `1s`;
                })
              </script>
              <style>
                    .klok {width: 30vw; height: 30vw; display: flex; justify-content: center; align-items: center; margin: 0 auto;
                       background: url("../images/19.jpg"); background-size: cover; border: 0.4vw solid darkgreen; 
                    box-shadow: 15px 15px 15px rgba(255, 255, 255, 0.5); border-radius: 50%;}
                    /* The small circle int the center */
                    .klok::before {content: ''; position: absolute; width: 15px; height: 15px; position: absolute; 
                    background: rgb(255, 255, 255); border-radius: 50%; z-index: 10000;}
                    .uur, .minuut, .sekonde {position: absolute;}
                    /* length of respective arms; */
                    .klok .uur, .ur {width: 16vw; height: 16vw;} 
                    .klok .minuut .mu {width: 19vw; height: 19vw;}
                    .klok .sekonde .sek {width: 23vw; height: 23vw;}
                    .ur, .mu, .sek {display: flex; justify-content: center;}
                    .ur::before {content: ''; width: 0.6vw; height: 9vw; background: #f81460; z-index: 10;
                     border-radius: 2.8px;}
                    .mu::before {content: ''; width: 0.6vw; height: 10vw; background: #ffffff; z-index: 11; 
                    border-radius: 3px;}
                    .sek::before {content: ''; width: 0.3vw; height: 14vw; background: cyan; z-index: 12; 
                    border-radius: 3px;}
              </style>